<template>
  <div class="goods-box">
    <nav-header></nav-header>
    <nav-bread>
      <span class="bread-item">orderComfirm</span>
    </nav-bread>
    <div class="address-content">
      <el-steps :active="2">
        <el-step title="确认地址"></el-step>
        <el-step title="查看订单"></el-step>
        <el-step title="支付"></el-step>
        <el-step title="订单确认"></el-step>
      </el-steps>
      <h1 class="shopping-address">订单内容</h1>
      <el-table
        :data="cartList"
        ref="table"
        style="width: 100%"
        class="cart-table"
        :header-cell-style="{background:'#605f5f',color:'#fff',size:'20px'}"
      >
        <el-table-column
          prop="productImage"
          label="IMG"
          min-width="20%"
          class="table"
        >
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="`/static/image/${scope.row.productImage}`"
          >
          </el-image>
        </template>
        </el-table-column>
        <el-table-column
          prop="productName"
          label="ORDER CONTENTS"
          min-width="30%">
        </el-table-column>
        <el-table-column
          prop="salePrice"
          label="PRICE"
          min-width="20%">
          <template slot-scope="scope">
            <span class="price">{{scope.row.salePrice | currency('￥')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="productNum" 
          label="QUANTITY"
          min-width="15%">
        </el-table-column>
        <el-table-column
          prop="sub"
          label="SUBTOTAL"
          min-width="15%">
          <template slot-scope="scope">
            <span class="price">{{scope.row.productNum*scope.row.salePrice | currency('￥')}}</span>
          </template> 
        </el-table-column>
      </el-table>
      <div class="total-price">
        <p>商品价格: {{totalPrice | currency('￥')}}</p>
        <p>运费: {{shipping | currency('￥')}}</p>
        <p>折扣: {{discount | currency('￥')}}</p>
        <p>总费用: <span class="all-price">{{allPrice | currency('￥')}}</span></p>
      </div>
      <div class="next-btn">
        <router-link to="/address">
          <button class="btn left">PREVIOUS</button>
        </router-link>
        <router-link to="/">
          <button class="btn right">PAY</button>
        </router-link> 
      </div>
      <nav-footer></nav-footer>
    </div>
  </div>
</template>
<script>
import NavHeader from '@/components/Header'
import NavFooter from '@/components/Footer' 
import NavBread from '@/components/Bread'

export default {
  name: 'orderComfirm',
  
  components: {
    NavHeader,
    NavFooter,
    NavBread
  },
  data () {
    return {
      cartList: [],
      totalPrice: '',
      allPrice: '',
      shipping: 10,
      discount: 80
    }
  },
  methods: {
    cartListInit () {
      this.$axios.get('/api/users/cartList').then((response) => {
        let res = response.data,sum = 0,list = []
        res.result.forEach((item)=>{
          if(item.checked == 1) {
            list.push(item)
            sum += parseFloat(item.salePrice) * parseInt(item.productNum)
          }
        })
        this.cartList = list
        this.totalPrice = sum
        this.allPrice = this.totalPrice + this.shipping - this.discount
        // this.cartList = res.result
        // this.cartList.forEach((item)=>{
        //   sum += item.
        // })
      })
    }
  },
  mounted() {
    this.cartListInit()
  },
}
</script>

<style lang="stylus" scoped>
  .goods-box
    background #f5f7fc
    font-size 14px
    .bread-item
      color #409eff
    .address-content
      width 85%
      margin 0 auto
      padding 50px 0
    .shopping-address
      padding 20px 0
      font-size 18px
      letter-spacing 5px
      color #605f5f
  .goods-box >>> .el-table th>.cell
    text-align center
    font-size 15px
    font-weight bold
  .goods-box >>> .el-table td
    text-align center
    height 120px
    padding 0
    font-size 15px
  .price
    color  #d1434a
    font-weight bold
  .total-price
    width 100%
    margin 30px 0
  .total-price p
    font-size 18px
    text-align right
    color #999
    height 50px
    line-height 50px
    .all-price
      color  #d1434a
      font-weight bold
  .next-btn
    width 100%
    height 60px
    position relative
    .btn
      width 180px
      height 45px
      background #d1434a
      color #fff
      border none
      font-size 16px
      font-weight bold
      letter-spacing 2px
      position absolute
    .right
      right 0
    .left
      left 0
      background #fff
      color #d1434a
      border 1px solid #d1434a
    .btn:hover
      background #f16f75
      transition all .3s ease-out
    .left:hover
      background #ffe5e6
      transition all .3s ease-out
</style>
